<template>
    <div class="frontPanel">
        <div class="frontBox">
            <div class="title">后台首页面板字段（管理员）</div>
            <div class="contentBg">
                <!-- Content--top -->
                <div class="ContentTop">
                    <span>今天</span>
                    <span>昨天</span>
                    <span>7天</span>
                    <span>30天</span>
                    <span>( )-( )天</span>
                </div>
                <!--注册-->
                <div class="registered">
                    <span class="lreg">注册：</span>
                    <div>
                        <div class="lcontent">
                            <div>新注册：</div>
                            <div class="secDiv">
                                <span>人才</span>
                                <span>企业</span>
                            </div>
                        </div>
                        <div class="lcontent">
                            <div>总注册：</div>
                            <div class="secDiv">
                                <span>人才</span>
                                <span>企业</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--审核-->
                <div class="registered">
                    <span class="lreg">审核：</span>
                    <div class="laudit">待审核企业：50家（总数）</div>
                    <div class="lcontent">
                        <div class="secDiv">
                            <div>顾问1：</div>
                            <div>待审核10家</div>
                        </div>
                    </div>
                    <div class="laudit">待审核人才：50家（总数）</div>
                    <div class="lcontent">
                        <div class="secDiv">
                            <div>审核专员1：</div>
                            <div>待审核10家</div>
                        </div>
                    </div>
                </div>
                <!--待沟通-->
                <div class="registered">
                    <span class="lreg">待沟通：</span>
                    <div class="laudit">待沟通人才：50个</div>
                    <div class="lcontent">
                        <div class="secDiv">
                            <div>顾问1 待沟通人才：10个</div>
                            <div class="secdivY">顾问2 待沟通人才：10个</div>
                        </div>
                    </div>
                </div>
                <!--企业合作-->
                <div class="registered">
                    <span class="lreg">企业合作：</span>
                    <div class="laudit">
                        <div>暂不合作：50家（总数）</div>
                        <div>已合作：3家（总数）</div>
                    </div>
                    <div class="lcontentY">
                        <div class="secDiv">
                            <div>顾问1 暂不合作：10家</div>
                            <div class="secdivY">已合作：10家</div>
                        </div>
                        <div class="secDiv">
                            <div>顾问2 暂不合作：10家</div>
                            <div class="secdivY">已合作：10家</div>
                        </div>
                    </div>
                </div>
                <!--人才入职-->
                <div class="registered">
                    <span class="lreg">人才入职：</span>
                    <div class="laudit">
                        <div>已入职：50个</div>
                        <div>保证期：3个</div>
                        <div>已过保：3个</div>
                        <div>放弃入职：3个</div>
                    </div>
                    <div class="lcontentY">
                        <div class="secDiv">
                            <div>顾问1 已入职：10个</div>
                            <div class="secdivY">保证期：10个</div>
                            <div class="secdivY">已过保：10个</div>
                            <div class="secdivY">放弃入职：10个</div>
                        </div>
                    </div>
                </div>
                <!--企业佣金-->
                <div class="registered">
                    <span class="lreg">企业佣金：</span>
                    <div class="laudit">
                        <div>待支付：50家</div>
                        <div>已支付：3家</div>
                    </div>
                    <div class="lcontentY">
                        <div class="secDiv">
                            <div>顾问1 待支付：10家</div>
                            <div class="secdivY">已支付：3家</div>
                        </div>
                        <div class="secDiv">
                            <div>顾问2 待支付：10家</div>
                            <div class="secdivY">已支付：3家</div>
                        </div>
                    </div>
                </div>
                <!--人才入职奖金-->
                <div class="registered">
                    <span class="lreg">人才入职奖金：</span>
                    <div class="laudit">
                        <div>待发放：50个</div>
                        <div>已发放：3个</div>
                    </div>
                    <div class="lcontentY">
                        <div class="secDiv">
                            <div>顾问1 待发放：10家</div>
                            <div class="secdivY">已发放：3家</div>
                        </div>
                        <div class="secDiv">
                            <div>顾问2 待发放：10家</div>
                            <div class="secdivY">已发放：3家</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "frontPanel"
    }
</script>

<style scoped>
    .frontPanel {
        width: 100%;
        height: 100vh;
        background-color: #F7F9FC;
    }

    .frontBox {
        width: 98%;
        /*height: 600px;*/
        background-color: white;
        margin-left: 10px;
    }

    .title {
        font-weight: bold;
        text-align: center;
        padding-top: 20px;
    }

    .contentBg {
        width: 100%;

    }

    .ContentTop {
        color: red;
        margin-left: 32%;
        margin-top: 10px;
    }

    .ContentTop > span {
        margin-right: 10px;

    }
    .lcontent{
        display: flex;
        flex-direction: row;
    }
    .registered{
        margin-left: 30px;
    }
    .lreg{
        color: #199ed8;
    }
    .secDiv>span{
        margin-right: 30px;
    }
    .secDiv{
        display: flex;
        flex-direction: row;
        margin-right:20px;
    }
    .secdivY{
        margin-left: 20px;
    }
    .laudit{
        font-weight: bold;
        display: flex;
        flex-direction: row;
    }
    .laudit>div{
        margin-right: 20px;
    }
    .lcontentY{
        display: flex;
        flex-direction: column;
    }
</style>
